<template>
  <div class="wrapper">
	  <el-container>
	        <el-aside width="250px">
				<div style="flex:1;"></div>
				<div  class="returnhome" @click="returnhome" style="margin-left: 20px; flex: 2; margin-right: 30px;cursor: pointer;"><L/></div>
				<el-footer style="flex:12; align-self: center;justify-content: center; overflow-y: scroll;">
				<div
				v-for="item in data"
				:key="item"
				>
					<el-card style="max-width: 230px;margin-top: 15px;margin-bottom: 15px;">					      
					    <p >{{item.p}}</p>
					</el-card>
					
				</div>
				</el-footer>
			</el-aside>
	        <el-container>
	          <el-header>
				  <img src="http://127.0.0.1/src/assets/images/fz-logo.png"
				  height="120px"/>
				  <img src="http://127.0.0.1/src/assets/images/fz-name.png"
				  height="80px" style="margin-left: 30px;"/>
			  </el-header>
	          <el-main style="position: relative;padding-left: 50px;">
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="BOSS——焦月雷"
				    >
				      <template #reference>
				        <div class="member" style="position: absolute; top: 220px;left: 460px;">
				        	<img src="http://127.0.0.1/src/assets/images/jyl.jpg" class="head"/>
				        </div>
				      </template>
				    </el-popover>
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="PROGRAMMER——辛蕊"
				    >
				      <template #reference>
				        <div class="member" style="position: absolute; top: 10px;left: 260px;">
				        	 <img src="http://127.0.0.1/src/assets/images/xr.jpg" class="head"/>
				        </div>
				      </template>
				    </el-popover>
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="PROGRAMMER——候宇潇"
				    >
				      <template #reference>
				       <div class="member" style="position: absolute; top: 220px;left: 60px;">
				       	  <img src="http://127.0.0.1/src/assets/images/hyx.jpg" class="head"/>
				       </div>
				      </template>
				    </el-popover>
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="PROGRAMMER——黄可星"
				    >
				      <template #reference>
				       <div class="member" style="position: absolute; top: 400px;left: 260px;">
				       	  <img src="http://127.0.0.1/src/assets/images/hkx.jpg" class="head"/>
				       </div>
				      </template>
				    </el-popover>
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="PROGRAMMER——王毅"
				    >
				      <template #reference>
				       <div class="member" style="position: absolute; top: 10px;left: 660px;">
				       	  <img src="http://127.0.0.1/src/assets/images/wy.jpg" class="head"/>
				       </div>
				      </template>
				    </el-popover>
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="PROGRAMMER——王梓涵"
				    >
				      <template #reference>
				       <div class="member" style="position: absolute; top: 220px;left: 850px;">
				       	  <img src="http://127.0.0.1/src/assets/images/wzh.jpg" class="head"/>
				       </div>
				      </template>
				    </el-popover>
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="PROGRAMMER——谷馨卉"
				    >
				      <template #reference>
				       <div class="member" style="position: absolute; top: 400px;left: 660px;">
				       	  <img src="http://127.0.0.1/src/assets/images/gxh.png" class="head"/>
				       </div>
				      </template>
				    </el-popover>
				  
			  </el-main>
	        </el-container>
	      </el-container>
	  </div>
</template>

<script setup>
import L from '@/components/icons/left'
import router from '@/router';
	import { useRoute } from 'vue-router';
	function returnhome (){
		router.push({ name: 'Indexmainfooter' })
	}
	const data = [
		{p:"   "},
		{p:"   "},
		{p:"“烽”指烽火，古代边防报警用的烟火。信息传递的速度和效率，我们致力于为客户提供快速响应的服务。"},
		{p:"“智”代表智慧、智能。象征着公司注重技术创新和研发,为客户提供智能化解决方案。"},
		{p:"创新与传承:融合了传统文化元素（烽火）与现代科技理念（智慧），体现了公司在传承优秀传统文化的基础上，勇于创新，追求科技发展的精神。"},
		{p:"团结与协作：烽火传递需要多方协作，烽智这个名字也暗示公司注重团队协作，倡导员工齐心协力，共同面对市场竞争。"},
		{p:"责任与担当：烽火肩负着保卫国家的重任，烽智这个名字也体现了公司肩负起社会责任，为客户提供优质服务，为行业发展贡献力量的决心。"},
		{p:"成长与突破：烽智这个名字中的“智”字，代表着公司不断追求进步，勇于突破自我，实现持续成长。"},
		{p:"   "},
		{p:"   "}
	]
</script>

<style scoped lang="scss">
	@keyframes disappear{
		0% {
		   opacity: 0; /* 元素在0%到40%的时间内保持完全可见 */
		   scale: 0.5;
		 }
		 40% {
		    opacity: 1; /* 元素在0%到40%的时间内保持完全可见 */
			scale: 1;
		  }
		60%{
		    opacity: 1; /* 元素在100%的时间内完全消失 */
			scale: 1;
		  }
		100%{
			opacity: 0; /* 元素在0%到40%的时间内保持完全可见 */
			scale: 0.5;
		}
	}
.wrapper{
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: linear-gradient(#d1d1f4, #7db8ff);
	
}
.el-aside{
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.el-header{
	height: 120px;
	padding-top: 10px;
}
.returnhome{
	color:#787878;
}
.returnhome:hover{
	color: #00aaff;
}
.returnhome:active{
	color: #787878;
}
.el-card{
	background-color: rgb(0, 0, 0,0.3) ;
	border: 0;
	border-radius: 10px;
	animation: disappear linear;
	animation-timeline: view();
}
p{
	font-weight: 500;
	font-style: italic;
	color: #efefef;
}
.el-footer::-webkit-scrollbar {
  width: 0; /* 隐藏水平滚动条 */
  height: 0; /* 隐藏垂直滚动条 */
}
.member{
	width: 220px;
	height: 220px;
	background-color: rgb(255, 255, 255,0.3);
	border-radius: 110px;
	cursor: pointer;
}
.head{
	width: 180px;
	height: 180px;
	border-radius: 90px;
	position: absolute;
	top: 20px;
	right: 20px;
	transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease,top 0.3s ease,right 0.3s ease;
}
.head:hover{
	width: 210px;
	height: 210px;
	border-radius: 105px;
	position: absolute;
	top: 5px;
	right: 5px;
}
.el-popover{
	font-weight: 500;
	font-style: italic;
	color: #efefef;
	background-color: rgb(0, 0, 0,0.3) ;
	border: 0;
	border-radius: 10px;
}
</style>